<template>
  <div class="container">
    <!-- 筛选区域 -->
    <el-form :inline="true" class="filter-container">
      <el-form-item label="用户姓名">
        <el-input v-model="filterParams.name" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="filterParams.mobile" placeholder="请输入手机号" clearable />
      </el-form-item>
      <el-form-item label="是否领奖">
        <el-select v-model="filterParams.isReceive" placeholder="请选择" clearable>
          <el-option label="已领奖" :value="0" />
          <el-option label="未领奖" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      v-loading="loading">
      <el-table-column prop="rsuuId" label="记录ID" width="180" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="mobile" label="手机号" width="130" />
      <el-table-column prop="isReceive" label="领奖状态" width="100">
        <template slot-scope="{row}">
          <el-tag :type="row.isReceive ? 'danger' : 'success'">
            {{ row.isReceive ? '未领取' : '已领取' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="receiveTime" label="领取时间" width="180" />
      <el-table-column prop="period" label="抽奖期数" width="120" />
      <el-table-column 
        label="操作" 
        width="120"
        align="center">
        <template slot-scope="{row}">
          <el-button 
            type="text" 
            @click="addOrUpdateHandle(row.rsuuId)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="pagination-container"
    />
    <template>
  <!-- 弹窗组件 -->
  <el-dialog
    title="中奖记录详情"
    :visible.sync="dialogVisible"
    width="60%"
    top="5vh">
    <el-form label-width="120px">
      <!-- 左侧列 -->
      <div class="form-column">
        <el-form-item label="记录ID：">
          <span>{{ detailData.rsuuId }}</span>
        </el-form-item>
        <el-form-item label="领奖状态：">
          <!-- <el-tag :type="detailData.isReceive ? 'danger' : 'success'">
            {{ detailData.isReceive ? '未领取' : '已领取' }}
          </el-tag> -->
          <el-switch
              v-model="detailData.isReceive"
              :active-value="0"
              :inactive-value="1"
              active-text="未领取"
              inactive-text="已领取"/>
        </el-form-item>
        <el-form-item label="领取时间：">
          <span>{{ detailData.receiveTime || '--' }}</span>
        </el-form-item>
        <el-form-item label="抽奖人姓名：">
          <span>{{ detailData.name }}</span>
        </el-form-item>
        <el-form-item label="联系电话：">
          <span>{{ detailData.mobile }}</span>
        </el-form-item>
        <el-form-item label="抽奖期数：">
          <span>{{ detailData.period }}</span>
        </el-form-item>
      </div>

      <!-- 右侧列 -->
      <div class="form-column">
        <el-form-item label="社区名称：">
          <span>{{ detailData.communityName }}</span>
        </el-form-item>
        <el-form-item label="奖品名称：">
          <span>{{ detailData.prizeName }}</span>
        </el-form-item>
        <el-form-item label="奖品封面：" v-if="detailData.coverPic">
          <el-image 
            :src="detailData.coverPic"
            :preview-src-list="[detailData.coverPic]"
            style="width: 200px; height: 150px"
            fit="cover">
          </el-image>
        </el-form-item>
        <el-form-item label="收货地址：">
          <div class="address-box">
            {{ detailData.deliveryAddress || '待填写地址' }}
          </div>
        </el-form-item>
      </div>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="updateBnt">确 定</el-button>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curPage: 1,
      limit: 10,
      total: 0,
      loading: false,
      filterParams: {
        name: '',
        mobile: '',
        isReceive: null,
        period: null
      },
      tableData: [], // 模拟数据示例
      dialogVisible: false,
      detailData: { // 示例数据
        rsuuId: 'RSUU_20250225_001',
        isReceive: 0,
        receiveTime: '2025-02-25 14:30:00',
        name: '张三',
        mobile: '13800138000',
        period: '第25期',
        communityName: '阳光社区',
        prizeName: '智能扫地机器人',
        coverPic: '',
        deliveryAddress: '北京市朝阳区XX街道XX号'
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    // this.addOrUpdateVisible = true;
    //     this.$nextTick(() => {
    //       this.$refs.addOrUpdate.init(id);
    //     });
    addOrUpdateHandle(id) {
        this.dialogVisible = true;
        this.detailData.rsuuId = id 
        this.detailData.id = id 
        this.$http({
            url: this.$http.adornUrl(
              `yshbms/raffle/info/${this.detailData.rsuuId}`
            ),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.detailData = data.raffleDto;
              this.detailData.id = id 
              console.log(this.dataForm);
            }
          });
    },
    updateBnt() {
      this.$http({
              url: this.$http.adornUrl(`yshbms/raffleSignUpUser/update`),
              method: "post",
              data: this.$http.adornData(this.detailData)
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.dialogVisible = false
                    this.loadData()
                  }
                });
              } else {
                this.$message.error(data.msg);
              }
            });
    },
    async loadData() {
      this.loading = true
      try {
        const params = {
          page: this.curPage,
          limit: this.limit,
          ...this.filterParams
        }
        
        // 实际应替换为接口请求
        this.$http({
          url: this.$http.adornUrl("yshbms/raffleSignUpUser/list"),
          method: "get",
          params: this.$http.adornParams(params),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            console.log(data.page,'这是说明')
            this.tableData = data.page
            this.total = data.total
          } else {
            this.dataList = [];
            this.total = 0;
          }
          this.dataListLoading = false;
        });
        
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    handleSizeChange(val) {
      this.limit = val
      this.loadData()
    },
    handleCurrentChange(val) {
      this.curPage = val
      this.loadData()
    },
    handleSearch() {
      this.curPage = 1
      this.loadData()
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}
.pagination-container {
  margin-top: 20px;
  text-align: right;
}
.filter-container {
  margin-bottom: 20px;
}
</style>
